<template>
  <div class="asnBill">
    <div class="publicSearch">
      <div class="searchBar" :style="{ height: isMoreSearch ? 'auto' : '' }">
        <el-button-group>
          <el-button @click="getTempInfo" size="mini" icon="el-icon-search"
            >查询</el-button
          >
          <el-button @click="clearSearchData" size="mini" icon="el-icon-refresh"
            >重置</el-button
          >
        </el-button-group>
        <!--<div>
          <span>关键字搜索</span>
          <el-input v-model="searchData.keyWords" size="mini" placeholder="仓库名称/货主名称" clearable></el-input>
        </div>-->
        <div>
          <span>仓库</span>
          <el-select
            v-model="searchData.wareId"
            size="mini"
            filterable
            placeholder=" "
            clearable
          >
            <el-option
              v-for="item in wares"
              :key="item.wareId"
              :label="item.wareName"
              :value="item.wareId"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <span>类型</span>
          <el-select
            v-model="searchData.type"
            size="mini"
            filterable
            placeholder=" "
            clearable
          >
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <span
        class="moreSearchBtn"
        :class="isMoreSearch ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
        @click="isMoreSearch = !isMoreSearch"
      ></span>
    </div>

    <el-dialog
      title="新建"
      :visible.sync="dialogNewVisible"
      :before-close="handleClose"
      width="400px"
      style="margin-top: -10vh"
    >
      <div>
        <el-form :model="routeTactic" :rules="rules" ref="routeTacticNewForm">
          <el-form-item label="模板名称" label-width="80px">
            <el-input v-model="printTemp.tempName"></el-input>
          </el-form-item>
          <el-form-item label="模板类别" label-width="80px">
            <el-select v-model="printTemp.type">
              <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="printTemp.type == '快递面单'"
            label="承运商"
            label-width="80px"
          >
            <el-select filterable v-model="printTemp.shipCode">
              <el-option
                v-for="ship in carriers"
                :key="ship.carrierCode"
                :label="ship.carrierName"
                :value="ship.carrierCode"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模板规格" label-width="80px">
            <el-radio-group v-model="printTemp.guigeLeixing">
              <el-radio-button label="标准"></el-radio-button>
              <el-radio-button label="自定义"></el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            v-if="printTemp.guigeLeixing == '自定义'"
            label=" 宽"
            label-width="80px"
          >
            <el-input placeholder="请输入宽" v-model="printTemp.width">
              <template slot="append">mm</template>
            </el-input>
          </el-form-item>
          <el-form-item
            v-if="printTemp.guigeLeixing == '自定义'"
            label="高 "
            label-width="80px"
          >
            <el-input placeholder="请输入高" v-model="printTemp.height">
              <template slot="append">mm</template>
            </el-input>
          </el-form-item>
          <el-form-item
            v-if="printTemp.guigeLeixing == '标准'"
            label-width="80px"
          >
            <el-select v-model="routeTactic.state">
              <el-option
                v-for="item in states"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="commitNewForm('routeTacticNewForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- <el-dialog title="修改打印模板" :visible.sync="dialogUpdateVisible" :before-close="handleClose2" width="900px"
                   style="margin-top: -10vh;">
            <div class="bigFormBox2">
                <el-form :model="rowData" :rules="rules2" ref="routeTacticUpdateForm" class="clearFloat">
                    <el-form-item label="路线" :label-width="formLabelWidth">
                        <el-select v-model="rowData.route" size="mini">
                            <el-option
                                    v-for="item in deliveryTypes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-select v-model="rowData.state" size="mini">
                            <el-option
                                    v-for="item in states"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="编码" :label-width="formLabelWidth">
                        <el-input v-model="rowData.code" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="承运人" :label-width="formLabelWidth">
                        <el-select v-model="rowData.carrierId" size="mini">
                            <el-option
                                    v-for="item in carriers"
                                    :key="item.carrierId"
                                    :label="item.carrierName"
                                    :value="item.carrierId"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="仓库" :label-width="formLabelWidth">
                        <el-select v-model="rowData.wareId" size="mini">
                            <el-option
                                    v-for="item in wares"
                                    :key="item.wareId"
                                    :label="item.wareName"
                                    :value="item.wareId"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <div style="float: left;width: 100%;">
                        <el-divider content-position="left"></el-divider>
                    </div>

                    <el-form-item label="最小重量" :label-width="formLabelWidth">
                        <el-input-number min="0" v-model="rowData.minWeight" size="mini"></el-input-number>
                    </el-form-item>
                    <el-form-item label="最大重量" :label-width="formLabelWidth">
                        <el-input-number min="0" v-model="rowData.maxWeight" size="mini"></el-input-number>
                    </el-form-item>
                    <el-form-item label="最小体积" :label-width="formLabelWidth">
                        <el-input-number min="0" v-model="rowData.minSize" size="mini"></el-input-number>
                    </el-form-item>
                    <el-form-item label="最大体积" :label-width="formLabelWidth">
                        <el-input-number min="0" v-model="rowData.maxSize" size="mini"></el-input-number>
                    </el-form-item>

                </el-form>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm2">取 消</el-button>
                <el-button type="primary" @click="commitUpdateForm('routeTacticUpdateForm')">确 定</el-button>
            </div>

        </el-dialog> -->

    <div class="headerBtns">
      <el-button
        size="small"
        type="primary"
        round
        icon="iconfont icon-xinzeng"
        @click="showNewModal"
      >
        新增
      </el-button>
    </div>

    <div class="tableBox">
      <el-table
        v-loading="loading.masterTable"
        highlight-current-row
        :data="routeTactics"
        style="width: 100%"
      >
        <!-- <el-table-column
                        prop="tempId"
                        label="ID"
                >
                </el-table-column> -->
        <el-table-column prop="tempName" label="模板名称"> </el-table-column>

        <el-table-column prop="type" label="打印类型">
          <template slot-scope="scope">
            <span>{{ scope.row.type }}</span>
            <span v-if="scope.row.type == '快递面单'"
              >（{{ scope.row.shipCode }}）</span
            >
          </template>
        </el-table-column>
        <!-- <el-table-column
                        prop="shipCode"
                        label="快递公司"
                >
                
                </el-table-column> -->
        <el-table-column prop="tempSizeType" label="规格">
          <template slot-scope="scope">
            <span>{{ scope.row.width }}*{{ scope.row.height }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="wareName" label="仓库"> </el-table-column>

        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <el-switch
              @change="update(scope.row)"
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
            <!-- <span>{{scope.row.state===1 ? '激活' : '未激活'}}</span> -->
          </template>
        </el-table-column>

        <el-table-column width="300" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="printTest(scope.row.tempHtml)" type="text"
              >预览</el-button
            >

            <el-button
              @click="showUpdateModal(scope.row)"
              class="tableBtn"
              icon="iconfont icon-bianji"
              type="text"
            ></el-button>
            <el-button
              @click="isDelete(scope.row.tempId)"
              icon="iconfont icon-shanchu"
              type="text"
              class="tableBtn danger"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="text-align: right"
        class="pagination-bottom"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :page-sizes="[15, 30, 50, 100]"
        :current-page.sync="searchData.pageNum"
        :page-size="searchData.pageSize"
        layout="sizes, total, prev, pager, next, jumper"
        :total="searchData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "RouteTactic",
  data() {
    return {
      carriers: [],
      wareId: PF.getLocal("wareId", "number"),
      wareName: PF.getLocal("wareName", "string"),
      isMoreSearch: false,
      loading: {
        masterTable: true,
      },
      searchData: {
        pageNum: 1,
        pageSize: 15,
        keyWords: "",
        wareId: PF.getLocal("wareId", "number"),
        type: "",
      },
      childSearchData: {
        waveId: "",
      },

      routeTactics: [],
      routeTactic: {
        route: null,
        code: "",
        minWeight: null,
        maxWeight: null,
        minSize: null,
        maxSize: null,
        carrierId: null,
        carrierName: "",
        organizationId: null,
        wareId: null,
        state: 0,
      },

      printTemp: {
        guigeLeixing: "自定义",
      },

      formLabelWidth: "120px",

      asnUdfHs: [],
      organizations: [],
      suppliers: [],
      multipleSelection: [],

      rowData: {
        soCountFloor: null,
        soCountCeilinig: null,
      },
      dialogUpdateVisible: false,
      dialogNewVisible: false,

      types: [
        {
          label: "验收标签",
          value: "验收标签",
        },
        {
          label: "商品标签",
          value: "商品标签",
        },
        {
          label: "货位标签",
          value: "货位标签",
        },
        {
          label: "快递面单",
          value: "快递面单",
        },
        {
          label: "装箱标签",
          value: "装箱标签",
        },
        {
          label: "货位组标签",
          value: "货位组标签",
        },
        {
          label: "二维码/条形码",
          value: "二维码/条形码",
        },
      ],

      wares: [],
      customers: [],
      carriers: [],

      rules: {},
      rules2: {},
    };
  },
  computed: {
    ...mapState(["soStates"]),
  },
  methods: {
    update(temp) {
      IOT.getServerData("/print/temp/infos/update", "post", temp, (ret) => {
        if (ret.code === 200) {
          this.$notify({
            title: "成功",
            message: "更新成功",
            type: "success",
          });
          this.getTempInfo();
        } else {
          IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
        }
      });
    },

    //打印
    printTest: function (strHTML) {
      this.$EventBus.$emit("printHtml", strHTML, 2);
    },
    getWareData() {
      IOT.getServerData("/ware/infos/list", "get", {}, (ret) => {
        if (ret.code === 200) {
          this.wares = ret.rows;
        } else {
          IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
        }
      });
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.getTempInfo();
    },

    handleCurrentChange(val) {
      this.pageNum = val;
      this.getTempInfo();
    },

    clearSearchData() {
      this.searchData.keyWords = "";
      this.type = "";
      this.wareId = null;
    },
    getTempInfo() {
      let that = this;
      that.loading.masterTable = true;
      let searchData = PF.JSON(this.searchData);
      IOT.getServerData("/print/temp/infos/list", "get", searchData, (ret) => {
        that.loading.masterTable = false;
        if (ret.code === 200) {
          this.routeTactics = ret.rows;
          this.searchData.total = ret.total;
          this.searchData.pageNum = ret.pageNumber;
        } else {
          IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
        }
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    showNewModal() {
      this.dialogNewVisible = true;
    },

    showUpdateModal(row) {
      window.location.href = "printTemp/printTemp.html?tempId=" + row.tempId;

      //  window.open('printTemp/printTemp.html?tempId='+=row.tempId);
      //  this.rowData = JSON.parse(JSON.stringify(row));
      // this.dialogUpdateVisible = true
    },
    isDelete(id) {
      this.$confirm("确认删除？")
        .then((_) => {
          this.deleteRouteTactic(id);
        })
        .catch((_) => {});
    },
    deleteRouteTactic(id) {
      let that = this;
      IOT.showOverlay("删除中，请稍等...");
      IOT.getServerData(
        "/print/temp/infos/delete",
        "get",
        { id: id },
        (ret) => {
          IOT.hideOverlay();
          if (ret.code === 200) {
            IOT.tips("删除成功！", "success", 1000, () => {
              that.getTempInfo();
            });
          } else {
            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
          }
        }
      );
    },
    handleClose() {
      this.dialogNewVisible = false;
    },
    handleClose2() {
      this.dialogUpdateVisible = false;
    },
    resetForm() {
      this.dialogNewVisible = false;
      this.routeTactic = {
        route: null,
        code: "",
        minWeight: null,
        maxWeight: null,
        minSize: null,
        maxSize: null,
        carrierId: null,
        carrierName: "",
        organizationId: null,
        wareId: null,
        state: 0,
      };
    },
    resetForm2() {
      this.dialogUpdateVisible = false;
    },
    commitNewForm(formName) {
      let that = this;
      let routeTactic = PF.JSON(this.routeTactic);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          window.location.href =
            "printTemp/printTemp.html?tempName=" +
            that.printTemp.tempName +
            "&type=" +
            that.printTemp.type +
            "&height=" +
            that.printTemp.height +
            "&width=" +
            that.printTemp.width +
            "&wareId=" +
            that.wareId +
            "&wareName=" +
            that.wareName +
            "&shipCode=" +
            that.printTemp.shipCode;
        } else {
          console.log("validate failed");
        }
      });
    },
    commitUpdateForm(formName) {
      let that = this;
      let routeTactic = PF.JSON(this.rowData);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          for (let item of that.carriers) {
            if (item.carrierId == routeTactic.carrierId) {
              routeTactic.carrierName = item.carrierName;
            }
          }
          IOT.showOverlay("保存中，请稍等...");
          IOT.getServerData(
            "/route/tactics/update",
            "post",
            routeTactic,
            (ret) => {
              IOT.hideOverlay();
              if (ret.code === 200) {
                IOT.tips("保存成功！", "success", 1000, () => {
                  this.getTempInfo();
                });
              } else {
                IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
              }
            }
          );
          this.resetForm2();
          this.dialogNewVisible = false;
          IOT.hideOverlay();
        } else {
          console.log("validate failed");
        }
      });
    },
  },
  created() {
    PF.getCarriers((rows) => {
      this.carriers = rows;
    });
    this.getWareData();

    this.getTempInfo();
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.asnBill {
}
</style>
